<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    linear-gradient,线性渐变图形<br />
    linear-gradient()
    <div
      style="height: 200px;width:320px;background: linear-gradient(red,green,blue);"
    ></div>
    <div
      style="height: 200px;width:400px;background:linear-gradient(teal,hotpink)"
    ></div>
    颜色百分比开始渐变<br />
    背景百分比：teal 20%,hotpink
    80%;高度20%，颜色开始变化，80%变化结束，之后为第二种颜色<br />
    <div
      style="height: 200px;width:200px;background:linear-gradient(teal 20%,hotpink 80%);"
    ></div>
    从50%开始，渐变，50%结束上个渐变，就为两种颜色均分<br />
    <div
      style="height: 200px;width:200px;background:linear-gradient(teal 50%,hotpink 50%);"
    ></div>
    三色条纹<br />
    <div
      style="height: 200px;width:200px;background:linear-gradient(teal 33.3%,hotpink 0,hotpink 66.6%,yellow 0);"
    ></div>
    条纹的方向,linear-gradient(to *,color,color)<br />
    to top ,to right,to bottom,to left<br />
    角度0deg ,90deg,180deg,270deg<br />
    to right<br />
    <div
      style="height: 200px;width:200px;background:linear-gradient(to right,teal 33.3%,hotpink 0,hotpink 66.6%,yellow 0);"
    ></div>
    设置背景宽高<br />
    <div
      style="height: 200px;width:200px;background:linear-gradient(to right,teal 33.3%,hotpink 0,hotpink 66.6%,yellow 0);background-size: 10px 100%;"
    ></div>
    45度,颜色各占一半<br />
    <div
      style="height: 100px;width:800px;background:linear-gradient(45deg,teal 50%,yellow 0);background-size: 20px 20px;"
    ></div>
    条纹,单元格颜色从左下角开始<br />
    <div
      style="height: 100px;width:800px;background:linear-gradient(45deg,teal 25%,yellow 0,yellow 50%,teal 0,teal 75%,yellow 0);background-size: 20px 20px;"
    ></div>
    网格，使用多个linear-gradient,向下渐变和向右渐变<br />
    <div
      style="height: 110px;width:770px;background:linear-gradient(rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(to right,rgba(200,0,0,.5) 50%,transparent 0);background-size:20px 20px;"
    ></div>
    波尔卡圆点,径向渐变<br />
    <div
      style="
      background: rgb(112, 87, 100);
      background-image:radial-gradient(tan 60%,transparent 0);
      background-size:30px 30px;
      width:900px;height:90px;"
    ></div>
    <div
      style="height: 110px;width:770px;background: #655;
    background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;"
    ></div>
    马赛克，平移渐变背景<br />
    <div
      style="width: 800px;height:100px;background:white;
      background-image: 
      linear-gradient(45deg,grey 25%,transparent 0),
      linear-gradient(45deg,transparent 75%,rgba(200,0,0,.5) 0),
      linear-gradient(45deg,rgb(69, 182, 197) 25%,transparent 0),
      linear-gradient(45deg,transparent 75%,rgba(142, 194, 108, 0.5) 0);
      background-position: 0 0,0 0,25px 25px,25px 25px;
      background-size: 50px 50px;
    "
    ></div>
    马赛克,8个三角形位置偏移,透明渐变<br />
    <div
      style="width: 800px;height:100px;background:white;
    background-image: 
    linear-gradient(45deg,grey 25%,transparent 0,transparent 75%),
    linear-gradient(45deg,transparent 75%,rgba(200,0,0,.5) 0),
    linear-gradient(45deg,rgb(69, 182, 197) 25%,transparent 0,transparent 75%),
    linear-gradient(45deg,transparent 75%,rgba(142, 194, 108, 0.5) 0),
    linear-gradient(45deg,rgb(224, 224, 224) 25%,transparent 0,transparent 75%),
    linear-gradient(45deg,transparent 75%,rgb(224, 224, 224) 0),
    linear-gradient(45deg,rgb(224, 224, 224) 25%,transparent 0,transparent 75%),
    linear-gradient(45deg,transparent 75%,rgb(224, 224, 224) 0);
    background-position:0 0,0 0,25px 25px,25px 25px,25px 0px,0px 25px,50px 25px,75px 0px;
    background-size: 50px 50px;
  "
    ></div>
    <div class="pie"></div>
    向右旋转20%<br />
    <div class="pie" style="transform: rotate(20deg);"></div>
    百分比<br />
    <div class="pie3" style="transform: rotate(20deg);"></div>
    <style>
      .pie {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
      }
      .pie3 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
      }
      .pie3::before {
        content: "";
        display: block;
        height: 100%;
        background-color: hotpink;
        border-radius: 0 100% 100% 0 / 50%;
        transform: rotate(0.1turn);
        margin-left: 50%;
        transform-origin: left;
        background-color: inherit;
      }
    </style>
    60%<br />
    <div class="per_60_hot pie"></div>
    <div class="per_60 pie"></div>
    <style>
      .per_60_hot::before {
        content: "";
        display: block;
        height: 100%;
        margin-left: 50%;
        transform-origin: left;
        border-radius: 0 100% 100% 0 / 50%;
        background: hotpink;
        transform: rotate(0.1turn);
      }
      .per_60::before {
        content: "";
        display: block;
        height: 100%;
        margin-left: 50%;
        transform-origin: left;
        border-radius: 0 100% 100% 0 / 50%;
        background: #655;
        transform: rotate(0.1turn);
      }
    </style>
    高度15px开始变，水平起角度<br />
    <h3
      style="background:hotpink;height: 80px;width:500px; background:linear-gradient(10deg, transparent 15px, #2bbf85 0);border:1px hotpink solid"
    ></h3>
    <h3
      style="background:hotpink;height: 80px;width:500px; background:linear-gradient(45deg, transparent 15px, #2bbf85 0);border:1px hotpink solid"
    ></h3>
    <h3
      style="background:hotpink;height: 80px;width:500px; background:linear-gradient(90deg, transparent 15px, #2bbf85 0);border:1px hotpink solid"
    ></h3>
    <h3
      style="background:hotpink;height: 80px;width:500px; background:linear-gradient(180deg, transparent 15px, #2bbf85 0);border:1px hotpink solid"
    ></h3>
    <h3
      style="background:hotpink;height: 80px;width:500px; background:linear-gradient(270deg, transparent 15px, #2bbf85 0);border:1px hotpink solid"
    ></h3>
    <h3
      style="background:hotpink;height: 80px;width:500px; background:linear-gradient(360deg, transparent 15px, #2bbf85 0);border:1px hotpink solid"
    ></h3>
    箭头<br />
    <h3
      style="
    background:hotpink;height: 80px;width:500px;
    background:
    linear-gradient(225deg ,transparent 29px ,#2bbf85 0) top right,
    linear-gradient(315deg, transparent 29px, #2bbf85 0) bottom right
    ;
    background-size: 100% 50%,100% 50%;
    background-repeat: no-repeat,no-repeat;
    border:1px hotpink solid"
    ></h3>
    <h3
      style="
        background:hotpink;height: 28px;width:111px;
        background:
        linear-gradient(225deg ,transparent 29px ,#2bbf85 0) top right,
        linear-gradient(315deg, transparent 29px, #2bbf85 0) bottom right
        ;
        background-size: 100% 50%,100% 50%;
        background-repeat: no-repeat,no-repeat;
        border:1px hotpink solid;
        line-height: 28px;
        padding-left: 3px;
        color:white;
        font-weight: 500;
        "
    >
      是歧视
    </h3>
    <h3
      style="
                background:hotpink;height: 28px;width:81px;
                background:
                linear-gradient(135deg ,transparent 29px ,#e9474f 0) top right,
                linear-gradient(45deg, transparent 29px, #e9474f 0) bottom right
                ;
                background-size: 100% 50%,100% 50%;
                background-repeat: no-repeat,no-repeat;
                border:1px hotpink solid;
                line-height: 28px;
                padding-left: 52px;
                color:white;
                font-weight: 500;
                "
    >
      不是歧视
    </h3>
  </body>
</html>
